<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();

	});
</script>

<div id="content-outer">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<div id="page-heading">
			<h1>History</h1>
		</div>

		<table id="mytable">
			<thead>
				<tr>
					<th>Source Account</th>
					<th>Target Account</th>
					<th>Target Bank</th>
					<th>Target Branch</th>
					<th>Amount</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="arrayList" items="${arrayList}">
					<c:forEach var="transaction" items="${arrayList}">
						<tr>
							<td>${transaction.account.accountName}</td>
							<td>${transaction.targetAccount.accountOwner}</td>
							<td>${transaction.targetAccount.bank}</td>
							<td>${transaction.targetAccount.branch}</td>
							<td><fmt:formatNumber pattern="#,###"
									value="${transaction.amount}" type="currency" /></td>
							<td>${transaction.date}</td>
						</tr>

					</c:forEach>
				</c:forEach>
			</tbody>
		</table>
	</div>
	</td>
	<td id="tbl-border-right"></td>
	</tr>
	<tr>
		<th class="sized bottomleft"></th>
		<td id="tbl-border-bottom">&nbsp;</td>
		<th class="sized bottomright"></th>
	</tr>
	</table>
	<br />
</div>
<div class="clear">&nbsp;</div>
</div>